<template>
  <view class="content">
    <view
      :style="{
        height: statusBarHeight + navHeight + 'px',
        marginBottom: '16rpx',
      }"
    >
    </view>
    <view class="header">
      <img
        src="https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/my/avatar_icon.png"
        alt=""
        class="avatar"
      />
      <view class="header_right">
        <view class="top_content">
          <view class="name">{{ user.userName }}</view>
          <img
            src="https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/my/phone_icon.png"
            alt=""
            class="phone_icon"
          />
          <view class="phone_num">
            {{ user.userCode }}
          </view>
        </view>
      </view>
    </view>
    <view class="main_content">
      <view class="institution">
        <view>
          <img
            src="https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/my/institution_icon.png"
            alt=""
            class="institution_icon"
          />
        </view>
      </view>
      <view class="menu">
        <view class="menu_item" @click="changePassword">
          <view class="flex">
            <img
              src="https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/my/password_icon.png"
              alt=""
              class="left_icon"
            />
            <text>修改密码</text>
          </view>
          <img
            src="https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/my/enter_icon.png"
            alt=""
            class="enter_icon"
          />
        </view>
        <view class="menu_item" @click="toBind">
          <view class="flex">
            <img
              src="https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/my/public_account_icon.png"
              alt=""
              class="left_icon"
            />
            <text>联系我</text>
          </view>
          <view class="flex a-center">
            <img
              src="https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/my/enter_icon.png"
              alt=""
              class="enter_icon"
            />
          </view>
        </view>
      </view>
    </view>
    <view class="log_out" @click="showOut = true"> 退出登录 </view>
    <!-- 退出登录 -->
    <u-popup
      :show="showOut"
      :customStyle="{ height: '316rpx' }"
      mode="center"
      round="40rpx"
      :closeOnClickOverlay="true"
      @close="cancelLogOut"
    >
      <view class="tip_main">
        <view class="title"> 退出登录 </view>
        <view class="tip_content"> 是否确认退出登录? </view>
        <view class="line"> </view>
        <view class="btn_box d-flex">
          <view class="btn" @click="cancelLogOut"> 取消 </view>
          <view class="btn" @click="confirmLogOut"> 确定 </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
const app = getApp();
export default {
  props: {},
  components: {},
  data() {
    return {
      statusBarHeight: app.globalData.statusBarHeight,
      navHeight: app.globalData.navHeight,
      user: {},
      showOut: false,
    };
  },
  watch: {},
  filters: {},
  created() {},
  onShow() {
    this.user = JSON.parse(uni.getStorageSync("userInfo"));
  },
  methods: {
    confirmLogOut() {
      uni.clearStorageSync();
      uni.reLaunch({
        url: "/pages/login/login",
      });
    },
    cancelLogOut() {
      this.showOut = false;
    },
    changePassword() {
      uni.navigateTo({
        url: "/pages/my/developing",
      });
    },
    toBind() {
      uni.navigateTo({
        url: "/pages/my/developing",
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.flex {
  display: flex;
  align-items: center;
}

.slot-content {
  color: #999999;
  font-size: 28rpx;
}

.content {
  background: url("https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/workbench/head_bj.png")
    no-repeat;
  background-size: 100% 528rpx;

  .header {
    display: flex;
    height: 144rpx;
    padding-left: 44rpx;
    margin-bottom: 56rpx;

    .avatar {
      width: 144rpx;
      height: 144rpx;
      margin-right: 32rpx;
      background: rgba(255, 255, 255, 0);
      border: 3.69rpx solid #ffffff;
      border-radius: 50%;
      box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
    }

    .header_right {
      padding-top: 22rpx;

      .top_content {
        display: flex;
        align-items: center;
        margin-bottom: 18rpx;

        .name {
          max-width: 136rpx;
          height: 48rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-weight: 500;
          text-align: left;
          color: #222222;
          line-height: 48rpx;
          font-size: 34rpx;
          margin-right: 16rpx;
        }

        .phone_icon {
          width: 24rpx;
          height: 24rpx;
          margin-bottom: -12rpx;
          margin-right: 6rpx;
        }

        .phone_num {
          margin-bottom: -12rpx;
          font-size: 24rpx;
          text-align: left;
          color: #222222;
          line-height: 34rpx;
        }
      }
    }
  }

  .main_content {
    position: relative;
    height: 368rpx;
    margin: 0 16rpx 30rpx 16rpx;

    .institution {
      position: relative;
      height: 202rpx;
      padding: 24rpx 0 0 24rpx;
      margin-bottom: 8rpx;
      background: url("https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/my/institution_background.png")
        no-repeat;
      background-size: 100% 100%;

      .institution_icon {
        position: absolute;
        top: -16rpx;
        right: 16rpx;
        height: 138rpx;
        width: 178rpx;
      }
    }

    .menu {
      position: absolute;
      top: 128rpx;
      height: 240rpx;
      padding: 32rpx 0;
      width: 100%;
      background: #ffffff;
      border-radius: 24rpx;
      box-sizing: border-box;

      .menu_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 88rpx;
        font-size: 28rpx;
        text-align: left;
        color: #222222;
        padding: 0 24rpx;

        .left_icon {
          height: 32rpx;
          width: 32rpx;
          margin-right: 24rpx;
        }

        .enter_icon {
          height: 28rpx;
          width: 28rpx;
        }

        .attention_state {
          width: 112rpx;
          height: 40rpx;
          margin-right: 12rpx;
          background: #ecf3ff;
          border-radius: 28rpx;
          font-size: 20rpx;
          font-weight: 500;
          text-align: center;
          color: #4087ff;
          line-height: 40rpx;
        }
      }
    }
  }

  .log_out {
    width: 718rpx;
    height: 108rpx;
    margin-left: 16rpx;
    font-size: 28rpx;
    font-weight: bold;
    background: #ffffff;
    border-radius: 24rpx;
    color: #ff3058;
    line-height: 108rpx;
    text-align: center;
  }

  .pop_header {
    position: relative;
    height: 96rpx;
    margin-bottom: 16rpx;
    text-align: center;

    .cancel_btn {
      position: absolute;
      width: 56rpx;
      left: 32rpx;
      top: 28rpx;
      font-size: 28rpx;
      text-align: left;
      color: #999999;
    }

    .header_text {
      font-size: 32rpx;
      font-weight: 500;
      color: #222222;
      line-height: 96rpx;
    }
  }

  .company_box {
    height: 728rpx;

    .company_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 670rpx;
      height: 108rpx;
      margin-left: 40rpx;
      margin-right: 40rpx;

      img {
        width: 28rpx;
        height: 28rpx;
      }

      .company_name {
        display: flex;
        align-items: center;
        width: 626rpx;
        height: 108rpx;
        font-size: 28rpx;
        font-weight: 500;
        text-align: left;
        color: #222222;
        line-height: 108rpx;
        border-bottom: 2rpx solid #f1f1f1;

        .name_box {
          max-width: 504rpx;
          margin-right: 16rpx;
          font-size: 28rpx;
          font-weight: 500;
          text-align: left;
          color: #222222;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .current_icon {
          width: 104rpx;
          height: 36rpx;
          background: #ebf3fe;
          border-radius: 4rpx;
          font-size: 20rpx;
          text-align: center;
          color: #4083fe;
          line-height: 36rpx;
        }
      }
    }
  }

  .auth_box {
    position: relative;
    width: 560rpx;
    height: 620rpx;

    .authority {
      width: 100%;
      height: 100%;
      background: url("https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/my/authority_img.png")
        no-repeat;
      background-size: 100% 100%;
    }

    .close_icon {
      position: absolute;
      top: -88rpx;
      right: 0;
      width: 48rpx;
      height: 48rpx;
      background: url("https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/my/close_icon.png")
        no-repeat;
      background-size: 100% 100%;
    }
  }
}

.tip_main {
  width: 622rpx;
  height: 316rpx;
  box-sizing: border-box;
  padding-top: 48rpx;

  .title {
    height: 44rpx;
    margin-bottom: 24rpx;
    font-size: 32rpx;
    text-align: center;
    color: #222222;
    line-height: 44rpx;
    font-weight: bold;
  }

  .tip_content {
    font-size: 28rpx;
    height: 56rpx;
    margin-bottom: 49rpx;
    text-align: center;
    color: #999999;
    line-height: 56rpx;
  }

  .line {
    width: 100%;
    height: 2rpx;
    background: #f1f1f1;
  }

  .btn_box {
    .btn {
      flex: 1;
      height: 96rpx;
      line-height: 96rpx !important;
      font-size: 32rpx;
      text-align: center;
      color: #4087ff;
      line-height: 40rpx;

      &:nth-child(1) {
        color: #323233;
        border-right: 2rpx solid #f1f1f1;
      }
    }
  }
}
</style>